iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

React鐵人先爆了再說系列 第 4

[04] TextInput使用

  • 分享至 

  • xImage
  •  

今天要做的是TextInput,也就是一個文字輸入框,當在框框中輸入文字時,下面的顯示也會跟著改變。

首先是新增一個叫做 TextInput.js 的檔案,新增的方式跟前一篇的 HelloWorld.js 一樣,裡面的內容如下:

import React, {Component} from 'react'

  class TextInput extends Component {

    // 建構式
    constructor(props) {
        
        super(props);
    
        this.state = { text: '' };
      }

    handleChange = (textChange) => {
        if (textChange.target instanceof HTMLInputElement) {
            this.setState({text: textChange.target.value})
        }
    }
      
      render() {
          return (
                <div>
                    <input type="text"
                    value={this.state.text}
                    placeholder="請輸入文字!"
                    onChange={this.handleChange}
                    />

                    <h1>{this.state.text}</h1>
                </div>
         )
      }
}

export default TextInput

React 中有 props 和 state會控制到元件, props 是由父元件傳入,在元件中是不會被改變的,而state是可以改變的資料,只有元件可以使用自己的state。

在元件的 constructor 設定state初始值是空白字串,當在文字框中輸入時,會觸發使用setState()去改變state的值。

App.js

import React, {Component} from 'react'
import TextInput from './components/TextInput'

class App extends Component {
  render() {

    return <TextInput/>
    
  }
}

export default App

執行後結果:

輸入文字:


上一篇
[03] 第一個 React 程式
下一篇
[05] 元件(Component)
系列文
React鐵人先爆了再說8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言